<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<form id="user_form"></form>
<script type="text/template" id="tpl">
	<div>
		<label for="">用户名</label>
		<input type="text" value="{{ user.username }}">
	</div>
	<div>
		<label for="">年龄</label>
		<input type="text" value="{{ user.age }}">
	</div>
	<div>
		<label for="">职业</label>
		<select name="" id="">
			{{ each jobs }}
			<option value="{{ $value.id }}">{{ $value.name }}</option>
			{{ /each }}
		</select>
	</div>
</script>
<script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.js"></script>
<script src="node_modules/art-template/lib/template-web.js"></script>
<script type="text/javascript">
function pGet(url, callback){
	return new Promise(function(resolve, reject){
		var oReq = new XMLHttpRequest()
		oReq.onload = function(){
			var res = JSON.parse(oReq.responseText)
			callback && callback(res)
			resolve(res)
		}
		oReq.onerror = function(err){
			callback && callback(err)
			reject(err)
		}
		oReq.open('get', url, true)
		oReq.send()
	})
}
var data = {}
pGet('http://localhost:3003/users/2')
	.then((user)=>{
		data.user = user
		return pGet('http://localhost:3003/jobs')
	},(err)=>console.log(err))
	.then((jobs)=>{
		data.jobs = jobs
		var htmlStr = template('tpl', data)
		// console.log(htmlStr)
		// document.querySelector("#demo").innerHTML = "Hello World!";
		document.querySelector('#user_form').innerHTML = htmlStr
		// document.querySelector('#user_form').innerHTML = htmlStr
		// document.querySelector('#user_form').innerHTML = htmlStr
	},(err)=>console.log(err))
</script>
</body>
</html>